<template>
  <div>
    <!-- 头部图片 -->
    <div>
      <img class="topImg" src="../../assets/image/login/com.png" alt="" />
    </div>
    <!-- tips -->
    <div class="font-12 mt-5 te-c font-info">请填写真实的信息，我们会尽快帮你审核。</div>
    <!-- form -->
    <van-form @submit="onSubmit">
      <!-- 备注 -->
      <van-cell-group inset class="mb-10 mt-10 basic-info-readonly" v-if="isShowUD">
        <van-field
          v-model="infoForm.context"
          readonly
          label-align="top"
          name="context"
          rows="2"
          autosize
          label="情况描述"
          type="textarea"
          maxlength="500"
          placeholder="请输入内容"
          show-word-limit
        />
      </van-cell-group>

      <van-cell-group inset class="mb-10 mt-10" v-else>
        <van-field
          v-model="infoForm.context"
          label-align="top"
          name="context"
          rows="2"
          autosize
          label="情况描述"
          type="textarea"
          maxlength="500"
          placeholder="请输入内容"
          show-word-limit
        />
      </van-cell-group>

      <!-- 基本信息 -->
      <van-cell-group inset class="basic-info-readonly" v-if="isShowUD">
        <van-field
          v-model="infoForm.place"
          readonly
          name="place"
          label="地址详情"
          placeholder="请输入内容"
        />
        <van-field
          v-model="infoForm.time"
          readonly
          name="time"
          label="输入时间"
          placeholder="点击选择时间"
        />
        <van-field
          name="uploader"
          :readonly="type == 'complaintDetail'"
          readonly
          label="上传图片"
          label-align="top"
        >
          <template #input>
            <van-uploader v-model="infoForm.updata1" :after-read="afterRead" />
          </template>
        </van-field>
      </van-cell-group>

      <van-cell-group inset v-else>
        <van-field
          v-model="infoForm.place"
          name="place"
          label="地址详情"
          placeholder="请输入内容"
        />
        <van-field
          v-model="infoForm.time"
          is-link
          name="time"
          label="输入时间"
          placeholder="点击选择时间"
          @click="showPickerForTime = true"
        />
        <van-field
          name="uploader"
          :readonly="type == 'complaintDetail'"
          label="上传图片"
          label-align="top"
          readonly
        >
          <template #input>
            <van-uploader v-model="infoForm.updata1" :after-read="afterRead" />
          </template>
        </van-field>
      </van-cell-group>

      <div class="dvc"></div>
      <!-- <div class="bottomButton">
        <van-row :gutter="20" justify="center">
          <van-col span="12">
            <van-button round block type="primary" native-type="submit">
              {{ type == "complaintDetail" ? "修改" : "添加" }}
            </van-button>
          </van-col>

          <van-col span="12" v-if="type == 'complaintDetail'">
            <van-button round block type="primary"> 删除 </van-button>
          </van-col>
        </van-row>
      </div> -->

      <!-- 原按钮 -->
      <!-- <div class="bottomButton">
        <van-row :gutter="20" justify="center">
          <van-col span="12">
            <van-button round block type="primary" native-type="submit">
              {{ type == "complaintDetail" ? "修改" : "添加" }}
            </van-button>
          </van-col>

          <van-col span="12" v-if="type == 'complaintDetail'">
            <van-button round block type="primary"> 删除 </van-button>
          </van-col>
        </van-row>
      </div> -->

      <div class="btn_box">
        <div class="Btns" v-if="isShowUD">
          <van-button
            class="del"
            round
            block
            type="primary"
            native-type="submit"
            @click="delBaseInfo"
          >
            删除
          </van-button>
          <van-button
            class="sub"
            round
            block
            type="primary"
            native-type="submit"
            @click="updateBaseInfo"
          >
            修改
          </van-button>
        </div>

        <div class="Btns_2" v-else>
          <van-button
            class="sub"
            round
            block
            type="primary"
            native-type="submit"
            @click="updateSubmit"
          >
            提交
          </van-button>
        </div>
      </div>
    </van-form>

    <van-popup v-model:show="showPickerForTime" position="bottom">
      <van-date-picker @confirm="onConfirmForTime" @cancel="showPickerForTime = false" />
    </van-popup>
  </div>
</template>

<script setup>
import { ref } from "vue";
import api from "@/api/user.js";
import { useUserStore } from "@/stores/user.js";
import houseApi from "@/api/house.js";
import { useRoute, useRouter } from "vue-router";
import { showConfirmDialog, showToast } from "vant";

const store = useUserStore();
// route
const route = useRoute();
const router = useRouter();
const type = route.name;
console.log(type);
// 表单数据
const infoForm = ref({
  context: "",
  place: "",
  time: "",
  image: [],
})
const isShowUD = ref(true)

// 控制底部展示的数据的flag for Time
const showPickerForTime = ref(false);

// 控制时间滑块
const onConfirmForTime = ({ selectedValues }) => {
  infoForm.value.time = selectedValues.join("-");
  console.log(infoForm.value);
  showPickerForTime.value = false;
}

const afterRead = (file) => {
  console.log("file", file);

  file.status = "uploading";
  file.message = "上传中...";

  const formData = new FormData();
  formData.append("file", file.file);

  api.uploadImage(formData).then((res) => {
    if (res.data.code == 200 && res.data.msg == "操作成功") {
      infoForm.value.image.push(res.data.fileName);
    }
  });

  setTimeout(() => {
    file.status = "done";
    file.message = "上传成功";
  }, 1000);
}

const getDetail = async () => {
  try {
    if (type == "complaintDetail") {
      const res = await houseApi.comDetail(route.query.tid);
      infoForm.value = res.data.data;
      const imgList = res.data.data.split(",");
      infoForm.value.image.push(imgList);
    }
  } catch (error) {}
}
getDetail();

/**
 * 删除操作
*/
// 删除按钮提交事件
const delBaseInfo = () => {
  //删除操作
  showConfirmDialog({
    title: "删除",
    message: "确认删除该条数据吗？"
  }).then(async () => {
      let res = await houseApi.delComplaint(route.query.tid);
      console.log("---del---", res);
      if (res.data.code == 200 && res.data.msg == "操作成功") {
        showToast("删除成功");
        setTimeout(() => {
          router.push({
            path: "/renovation",
          });
        }, 1200);
      }
  }).catch(() => {})
}

// 修改按钮点击事件
const updateBaseInfo = () => {
  isShowUD.value = false
}
// 修改提交按钮
const updateSubmit = async () => {
  // let image = infoForm.value.image == [] ? '' : infoForm.value.image.join(",")
  let params = {
    tid: route.query.tid,
    context: infoForm.value.context,
    place: infoForm.value.place,
    time: infoForm.value.time,
    image: '',
    createBy: store.userInfo.userId
  }
  let res = await houseApi.updateComplaint(params)
  console.log('--res--', res);
  if (res.data.code == 200 && res.data.msg == '操作成功') {
    showToast('修改成功')
    setTimeout(() => {
      router.push({
        path: '/renovation'
      })
    }, 1200);    
  }
}

const onSubmit = async (values) => {
  if (type == "complaintDetail") {
    // 编辑事件预留
  } else {
    showConfirmDialog({
      title: "确认添加吗？",
    })
      .then(async () => {
        await houseApi.addRen({ ...values });
        router.back();
      })
      .catch(() => {
        // on cancel
      });
  }
}
</script>
<style lang="scss" scoped>
// 头部图片
.topImg {
  width: 100%;
  height: 140px;
}
img {
  width: 100%;
  height: 100%;
}

.dvc {
  height: 70px;
}

.btn_box {
  position: absolute;
  width: 100%;
  bottom: 0;
  background-color: #fff;
  margin-top: 20px;
  padding: 15px 16px;
  display: flex;
  border: none;
  .Btns {
    width: 100%;
    display: flex;
    .del {
      flex: 3;
      background: linear-gradient(90deg, #f2724d 0%, #ff9576 99%);
    }
    .sub {
      flex: 5;
      margin-left: 20px;
    }
  }
  .Btns_2 {
    width: 100%;
    .sub {
      width: 100%;
    }
  }
}
::v-deep .basic-info-readonly {
  .van-cell {
    background-color: #f2f2f2;
  }
}
</style>
